import React, { Component } from "react";
import { Text, View, TextInput } from "react-native";

class Blink extends Component {
    constructor(props) {
        super(props);
        this.state = { showText: true };

        // 每1000毫秒对showText状态做一次取反操作
        setInterval(() => {
            this.setState(previousState => {
                return { showText: !previousState.showText };
            });
        }, 1000);
    }

    render() {
        // 根据当前showText的值决定是否显示text内容
        let display = this.state.showText ? this.props.text : "";
        return <Text>{display}</Text>;
    }
}

export default class BlinkApp extends Component {
    constructor(props) {
        super(props);
        this.state = { text: "" };
    }
    render() {
        return (
            <View style={{ flex: 1 }}>
                <Blink text="I love to blink" />
                <Blink text="Yes blinking is so great" />
                <Blink text="Why did they ever take this out of HTML" />
                <Blink text="Look at me look at me look at me" />
                <View
                    style={{
                        width: 50,
                        height: 50,
                        backgroundColor: "powderblue"
                    }}
                />
                <View
                    style={{
                        width: 100,
                        height: 100,
                        backgroundColor: "skyblue"
                    }}
                />
                <View
                    style={{
                        width: 150,
                        height: 150,
                        backgroundColor: "steelblue"
                    }}
                />

                <TextInput
                    style={{ height: 40 }}
                    placeholder="Type here to translate!"
                    onChangeText={text => this.setState({ text })}
                />
                <Text style={{ padding: 10, fontSize: 42 }}>
                    {this.state.text
                        .split(" ")
                        .map(word => word && "🍕")
                        .join(" ")}
                </Text>
            </View>
        );
    }
}
